<!DOCTYPE html>
<html>
<head>
  <title>DVD Ambassador &mdash; Disc Locator</title>
  <link rel="stylesheet" type="text/css" href="dvds.css">
  <script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>
  <script type="text/javascript">
    var filterCount = 0;

    $(function () {
      $('.filterItem [name]').live('adjustName', function () {
        var suffix = $(this).closest('.filterItem').data('suffix');
        if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) {
          return;
        }
        $(this).attr('name', $(this).attr('name') + suffix);
      });

      $('select.filterChooser').live('change', function () {
        var filterType = $('option:selected', this).attr('data-filter-type'),
            filterItem = $(this).closest('.filterItem');
        $('.qualifier', filterItem).remove();
        $('div.template.' + filterType)
            .children().clone().addClass('qualifier')
            .appendTo(filterItem)
            .trigger('adjustName');
        $('option[value=""]', this).remove();
      });

      $('button.filterRemover').live('click', function () {
        $(this).closest('.filterItem').remove();
      });

      $('#addFilterButton').click(function () {
        var filterItem = $('<div>')
            .addClass('filterItem')
            .appendTo('#filterPane')
            .data('suffix', '.' + (filterCount++));
        $('div.template.filterChooser')
            .children().clone().appendTo(filterItem)
            .trigger('adjustName');
      }).click();

      $('#filtersForm').submit(function () {
        $('#resultsPane').load('applyFilters', $('#filtersForm').serializeArray());
        return false;
      });

      $('input.numeric').live('keypress', function (event) {
        if (event.which < 48 || event.which > 57) {
          return false;
        }
      });
    });
  </script>
</head>

<body>
<div id="pageContent">

  <h1>DVD Ambassador</h1>
  <h2>Disc Locator</h2>

  <form id="filtersForm" action="/fetchFilteredResults" method="post">

    <fieldset id="filtersPane">
      <legend>Filters</legend>
      <div id="filterPane"></div>
      <div class="buttonBar">
        <button type="button" id="addFilterButton">Add Filter</button>
        <button type="submit" id="applyFilterButton">Apply Filters</button>
      </div>
    </fieldset>

    <div id="resultsPane"><span class="none">No results displayed</span></div>

  </form>

</div>

<!-- hidden templates -->
<div id="templates">

  <div class="template filterChooser">
    <button type="button" class="filterRemover" title="Remove this filter">X</button>

    <select name="filter" class="filterChooser" title="Select a property to filter">
      <option value="" data-filter-type="" selected="selected">-- choose a filter --</option>
      <option value="title" data-filter-type="stringMatch">DVD Title</option>
      <option value="category" data-filter-type="stringMatch">Category</option>
      <option value="binder" data-filter-type="numberRange">Binder</option>
      <option value="release" data-filter-type="dateRange">Release Date</option>
      <option value="viewed" data-filter-type="boolean">Viewed?</option>
    </select>
  </div>

  <div class="template stringMatch">
    <select name="stringMatchType">
      <option value="*">contains</option>
      <option value="^">starts with</option>
      <option value="$">ends with</option>
      <option value="=">is exactly</option>
    </select>
    <input type="text" name="term"/>
  </div>

  <div class="template numberRange">
    <input type="text" name="numberRange1" class="numeric"/> <span>through</span>
    <input type="text" name="numberRange2" class="numeric"/>
  </div>

  <div class="template dateRange">
    <input type="text" name="dateRange1" class="dateValue"/> <span>through</span>
    <input type="text" name="dateRange2" class="dateValue"/>
  </div>

  <div class="template boolean">
    <input type="radio" name="booleanFilter" value="true" checked="checked"/> <span>Yes</span>
    <input type="radio" name="booleanFilter" value="false"/> <span>No</span>
  </div>

</div>

</body>
</html>
